Image color reduction

*Go to HTML quick reference.

Below are the thoughts of Tom Neff on image color reduction (in-line .gif images should generally have few colors, in order to reduce file size and the time needed to load the images, and to increase the probability that browsers will display them correctly).

To do color reduction in Adobe Photoshop, switch the Image Mode to "RGB Color", then switch again to "Indexed Color". You will then be presented with a color-reduction menu that has a number of choices, among which are "5-bit" (i.e. a maximum of 32 colors) and "6-bit" (a maximum of 64 colors). Many images which are not intended to be photorealistic look perfectly satisfactory in 64 (or even 32) colors, and in-line .gifs are a poor format for presenting photorealistic images in any case. Monochrome line art or text on a white background can very often remain effectively anti-aliased when using 16 or fewer shades of grey. [Warning: when Adobe Photoshop does color reduction, occasionally it will take a large area of constant color, and dither it between two or three "nearby" colors. This not only visually degrades the image, but by making the image data less compressible, will negate much of color reduction's effect of reducing file sizes.]

Another tool in Adobe Photoshop which may sometimes be useful in color reduction is the "Image - Map - Posterize" command, which takes adjacent pixels of similar color, and merges them into a common color; this command may be applied to a selected area, rather than the whole image.

Another, simpler, approach to color reduction is that of the Unix program xv; when run with the -ncols # command-line argument (e.g. -ncols 32 or -ncols 64), xv selectively drops colors from the existing image palette, and pixels of these dropped colors are given the closest matching colors which are retained in the new palette. This can have both advantages and disadvantages as compared with the Photoshop approach of treating a .gif as a truecolor and then redithering.

Note: while certain browsers have had problems with palette exhaustion when displaying full 256-color in-line .gifs, or multiple .gifs with differing large color palettes on the same page, the default rendering algorithm of some recent (2/96) versions of Netscape sometimes substitutes strange colors in some color-reduced .gifs (there is a particular problem with the substitution of greens or pinks for shades of grey, which negatively affects the display of color-reduced greyscales; to avoid these difficulties, configure Netscape to "always dither").

From: tneff@panix.com (Tom Neff)
Subject: Re: 256 vs 65,536 vs 16,777,216 Colors - What to assume about most viewers???
Date: Thu Aug 10 08:01:35 CDT 1995
Newsgroups: comp.infosystems.www.authoring.images

A few points about color.

  1. If someone browses from a 16 color Windows setup (and many still do), it's true that your ski trip picture won't look very good, but it's also true that such a user is accustomed to seeing all pictures look bad as they surf the web... so your page is unlikely to be singled out for opprobrium.
  2. It does nevertheless make sense to keep the color count to a minimum on your navigational icons, bullets, bitmapped text, and other things that more or less need to be legible in order to use your page. See Adobe's pages for examples of this in action. (Adobe is worth emulating in a lot of ways, although they've added some heavier graphics lately.)
  3. The best philosophy for external images (the kind where you link from a word or thumbnail to see the full size pic) is to let 'er rip and use as big of a color space as you need; for continuous tone images like paintings or photos, an external should be a 24 bit color JPEG. Don't dither or dumb down the color space (again, on externals) to try and anticipate fewer-color browsers. Let them dither as best they can. Remember that your image may be viewed more than once! Many's the time I've grabbed a stock image using a 256 color browser with crappy dithering, only to load it up elsewhere on a high color machine for real work. This is one more example of the adage: don't try to outguess the user, cause you can't. :-)
  4. Lowering color counts on inlines, and then dithering the hell out of them to retain appearances, usually loses. The 1-pixel run lengths balloon image size. Keep it low and continuous, and let the browser dither as needed. 
--
Tom Neff :: tneff@panix.com :: <URL:http://www.panix.com/~tneff/>